{% extends "skeleton.html" %}
{% import "forum/macros.html" as m %}

{% block header %}
  {{m.html_header(resource_version)}}
  <script src="/ckeditor/v{{resource_version}}/ckeditor.js"></script>
{% endblock %}
{% block pagetitle %}Forum &bull; {{forum.name}} &bull; {{forum_thread.subject}}{% endblock %}
{% block title %}Forum &bull; {{forum.name}}{% endblock %}

{% block maincontent %}
  <section class="content">
    <nav class="breadcrumbs">
      <ul>
        <li><a href="/">War Worlds</a>
        <li><a href="/forum">Forums</a>
        <li><a href="/forum/{{forum.slug}}">{{forum.name}}</a>
        <li><span>{{forum_thread.subject}}</span>
      </ul>
    </nav>

    <h1>{{forum_thread.subject}}</h1>
    {% if is_moderator %}
      <p>
        <a href="/forum/{{forum.slug}}/{{forum_thread.slug}}/sticky" class="button">
          {% if forum_thread.is_sticky %}Unstick{% else %}Make Sticky{% endif %}
        </a>
      </p>
    {%- endif %}
  {% for post in posts %}
    <article class="single-post" data-postid="{{post.key()}}">
      <img src="{{profiles[post.user.user_id()]|profile_shield}}" class="poster-shield" width="64" height="64" alt="Shield" />
      <header>
        <span class="author"><a href="{{m.profile_url(profiles[post.user.user_id()])}}" rel="author">{{profiles[post.user.user_id()].display_name}}</a></span>
        <span class="posted">posted <time itemprop="dateCreated" datetime="{{post|post_date_std}}">{{post|post_date_time}}</time></span>
        <span class="controls">
        {% if is_moderator or (user and post.user.user_id() == user.user_id()) %}
          <a href="/forum/{{forum.slug}}/{{forum_thread.slug}}/posts/{{post.key()}}/delete" class="button">Delete</a>
          <a href="/forum/{{forum.slug}}/{{forum_thread.slug}}/posts/{{post.key()}}" class="button">Edit</a>
        {%- endif %}
          <a href="javascript:quote(&quot;{{post.key()}}&quot;);" class="button">Quote</a>
        </span>
      </header>
      <div class="content">
        {{post.content|html_tidy}}
        {% if post.edit_notes -%}
          <p>{{post.edit_notes}}</p>
        {%- endif %}
      </div>
    </article>
  {% endfor %}

    <div class="subscription">
      <form method="POST" action="/forum/{{forum.slug}}/{{forum_thread.slug}}/subscription">
      {% if is_subscribed %}
        <input type="hidden" name="action" value="unsubscribe">
        <div class="input-button"><input type="submit" value="Unsubscribe" title="Click here if you no longer want to receive email updates when there are new posts in this thread."></div>
      {% else %}
        <input type="hidden" name="action" value="subscribe">
        <div class="input-button"><input type="submit" value="Subscribe" title="Click here if you want to receive email updates when there are new posts."></div>
      {% endif %}
      </form>
    </div>
    {{m.paginator(page_no, total_pages)}}

    <a name="post-reply"></a>
    <form method="POST" action="/forum/{{forum.slug}}/{{forum_thread.slug}}/posts">
      <fieldset>
        <header class="post-reply-header">
          Post Reply
        </header>
        <div class="forum-field forum-field-markitup">
          <label for="post-content">Message:</label>
          <div class="hack"><textarea name="post-content" id="post-content"></textarea></div>
        </div>
        <div class="forum-field checkbox">
          <div class="hack"><input type="checkbox" name="post-subscribe" id="post-subscribe"{% if is_subscribed %} checked{% endif %}></div>
          <label for="post-subscribe">Notify me by email when someone replies to this thread.</label>
        </div>
        <div class="forum-field forum-field-submit">
          <div class="input-button"><input type="submit" value="Post"></div>
        </div>
      </fieldset>
    </form>
    <script>
      $(function() {
        var editor = CKEDITOR.replace("post-content");
        var $container = $("fieldset div.forum-field-markitup div.hack");

        CKEDITOR.on("instanceReady", function() {
          editor.resize($container.width(), $container.height());
        });
        $(window).resize(function() {
          editor.resize($container.width(), $container.height());
        });

        var changed = false;
        var saving = false;
        editor.on("change", function() {
          changed = true;
        });
        $("form").on("submit", function() {
          saving = true;
        });
        $(window).on("beforeunload", function() {
          if (changed && !saving) {
            return "You have unsaved changes.";
          }
        });

        window.quote = function(postID) {
          var $article = $("article[data-postid="+postID+"]");
          var $postContent = $article.find("div.content");
          var $author = $article.find("span.author");
          editor.setData("<blockquote><p><em><strong>"+$author.html()+"</strong> said,</em></p>"+$postContent.html()+"</blockquote><p></p>");
        }
      });
    </script>
  </section>
{% endblock %}
